<template>
  <div class="order-box">
    <div class="order-title">
      <div class="order-hd">
        <p>订单详情</p><span>请谨防钓鱼链接或诈骗电话</span>
      </div>
      <div class="order-no">订单号：<p>{{ order.outTradeNo }}</p></div>
    </div>
    <div class="order-detail">
      <div class="order-status">
        <p>{{ order.status | state }}</p>
        <!--配货按钮-->
        <!--<el-popconfirm v-if="order.status === 2" class="order-pinking" title="确定要配货么?" @confirm="orderPinking(order.status)"><el-button slot="reference">配货</el-button>-->
        <el-button v-if="order.status === 2" class="order-pinking" type="success" @click="orderPinking(order.status)">
          配货
        </el-button>
        <!--</el-popconfirm>-->
        <!--选择快递公司发货-->
        <div v-if="order.status === 3 || order.status === 4" class="order-shipping">
          <el-select v-model="order.expressId" placeholder="选择快递公司">
            <el-option v-for="express in expresses" :key="express.id" :label="express.name" :value="express.id" />
          </el-select>
          <el-input v-model="order.expressNum" placeholder="请输入快递单号" class="input-expressNum" />
          <el-button v-if="order.status === 3" type="success" class="change_express" @click="orderShipping(order.id)">
            发货
          </el-button>
          <!--修改快递-->
          <div v-if="order.status === 4" class="change_express">
            <el-button type="danger" @click="orderShipping(order.id)">修改快递</el-button>
            <el-button type="success" @click="orderFinishing(order.id)">交易成功</el-button>
          </div>
        </div>

        <!--订单进度条-->
        <el-steps :active="order.status" align-center class="order-step">
          <el-step title="下单" :description="order.createdAt | date_format" />
          <el-step title="付款" :description="order.paidAt | date_format" />
          <el-step title="配货" :description="order.pickedAt | date_format" />
          <el-step title="出库" :description="order.shippedAt === 'null' ? '' : order.shippedAt | date_format" />
          <el-step title="完成" :description="order.finishedAt === 'null' ? '' : order.finishedAt | date_format" />
        </el-steps>

        <!--显示物流信息-->
        <el-collapse v-if="order.status === 4 || order.status === 5" class="collapse-express">
          <el-collapse-item title="展开物流信息" name="1">
            <iframe
              name="kuaidi100"
              :src="`https://www.kuaidi100.com/chaxun?com=${order.express.name}&nu=${order.expressNum}`"
              width="100%"
              height="1220"
              marginwidth="0"
              marginheight="0"
              hspace="0"
              vspace="0"
              frameborder="0"
              scrolling="no"
            />
          </el-collapse-item>
        </el-collapse>
      </div>
      <!--订单商品-->
      <div class="order-product">
        <ul>
          <li v-for="product in order.products" :key="product.id">
            <img :src="product.image" :alt="product.name">
            <p class="name">{{ product.name }}</p>
            <p class="price">{{ product.price }} 元 x {{ product.num }}</p>
          </li>
        </ul>
      </div>
      <!--订单地址-->
      <div class="order-address">
        <div class="ad-title">
          收货人信息：
        </div>
        <div class="ad-detail">
          <p>客户编号： {{ order.userId }}</p>
          <p>姓 名： {{ address.name }}</p>
          <p>联系电话： <span><a :href="'tel:' + address.tel">{{ address.tel }}</a></span></p>
          <p>收货地址： {{ address.province }} {{ address.city }} {{ address.area }} {{ address.detail }}</p>
        </div>
      </div>
    </div>
    <!--订单描述-->
    <div class="order-desc">
      <div class="desc-title">
        支付方式及送货时间
      </div>
      <div class="desc-detail">
        <p>支付方式： 货到付款</p>
        <p>送货时间： 不限送货时间</p>
      </div>
    </div>
    <!--订单统计-->
    <div class="order-count">
      <p>商品总价：<span>{{ order.totalPrice }} 元</span></p>
      <p>运 费：<span>0 元</span></p>
      <p>订单金额：<span>{{ order.totalPrice }} 元</span></p>
      <p>实付金额：<span>{{ order.status == 1 ? 0 : order.totalPrice }} 元</span></p>
    </div>
  </div>
</template>
<script>
import '../../filter'
import { changeOrderPicking, changeOrderShipping, changeOrderFinishing, fetchOrder } from '@/api/order'
import { fetchExpressList } from '@/api/express'

export default {
  filters: {
    state: (value) => {
      const arr = ['待付款', '配货中', '待发货', '待收货', '交易成功']
      return arr[value - 1]
    }
  },
  data() {
    return {
      order: [],
      address: {},
      expresses: []
    }
  },
  created() {
    this.init()
    // 查出所有快递公司
    fetchExpressList().then((res) => {
      this.expresses = res.data.expresses
    })
  },
  methods: {
    // 当前订单
    async init() {
      const res = await fetchOrder(this.$route.params.id)
      this.order = res.data.order
      this.address = res.data.order.address
    },
    // 配货
    orderPinking(status) {
      this.$confirm('确定要配货么, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        const res = await changeOrderPicking(this.$route.params.id, status)
        if (res.code === 20000) {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.init()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消配货'
        })
      })
    },
    // 发货、修改物流
    orderShipping(id) {
      this.$confirm('确定要发货么, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        const res = await changeOrderShipping(id, {
          expressId: this.order.expressId,
          expressNum: this.order.expressNum
        })
        if (res.code === 20000) {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.init()
        }
      })
    },
    // 已完成
    orderFinishing(id) {
      this.$confirm('确定完成交易, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true
      }).then(async() => {
        const res = await changeOrderFinishing(id)
        if (res.code === 20000) {
          this.$message({
            type: 'success',
            message: res.message
          })
          this.init()
        }
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消完成交易'
        })
      })
    }
  }
}
</script>
<style scoped>
.order-box {
  padding-left: 20px;
}

.order-hd {
  display: flex;
  align-items: center;
  color: #757575;
}

.order-hd p {
  font-size: 30px;
  font-weight: 400;
}

.order-hd span {
  margin-left: 20px;
  font-size: 12px;
  margin-top: 15px;
}

.order-no {
  color: #333333;
  font-size: 18px;
  font-weight: 400;
  border-bottom: 1px solid #e0e0e0;
  display: flex;
  align-items: center;
  margin-right: 110px;
}

.order-no p {
  color: #2196f3;
  font-size: 14px;
}

.order-status p {
  color: #F37B1D;
  font-size: 20px;
}

.order-step {
  margin-top: 70px;
}

/*订单商品*/
.order-product {
  list-style: none;
  padding-top: 50px;
  margin-left: -25px;
}

.order-product ul li {
  display: flex;
  align-items: center;
  border-bottom: 1px solid #e0e0e0;
  margin-right: 110px;
  padding: 10px 0;
}

.order-product ul li img {
  display: block;
  width: 80px;
  height: 80px;
}

.order-product ul li .name {
  margin-left: 50px;
  color: #333333;
  font-size: 14px;
  width: 290px;
}

.order-product ul li .price {
  margin-left: 250px;
  color: #333333;
  font-size: 14px;
}

/*订单地址*/
.order-address {
  padding-left: 10px;
  padding-top: 30px;
  border-bottom: 1px solid #e0e0e0;
  margin-right: 110px;
}

.order-address .ad-title {
  font-size: 18px;
  font-weight: 400;
  color: #333;
}

.order-address .ad-detail {
  margin-top: 20px;
  font-size: 15px;
  color: #757575;
}

.order-address .ad-detail span {
  color: #1f99b0;
}

/*订单描述*/
.order-desc {
  padding-left: 10px;
  padding-top: 40px;
  border-bottom: 1px solid #e0e0e0;
  margin-right: 110px;
}

.order-desc .desc-title {
  font-size: 18px;
  font-weight: 400;
  color: #333;
}

.order-desc .desc-detail {
  margin-top: 20px;
  font-size: 15px;
  color: #757575;
}

/*订单统计*/
.order-count {
  float: right;
  margin-right: 110px;
  margin-top: 20px;
}

.order-count p {
  color: #757575;
  font-size: 15px;
}

.order-count span {
  color: #ff6700;
  font-size: 14px;
}

/*配货按钮*/
.order-pinking {
  float: right;
  margin: -40px 110px 0 0;
}

/*发货按钮*/
.order-shipping {
  float: right;
  margin: -40px 110px 0 0;
  display: flex
}

/*快递单号输入框*/
.input-expressNum {
  width: 200px;
  padding-left: 8px;
}

/*修改快递*/
.change_express {
  margin-left: 8px;
}

/*展开物流信息*/
.collapse-express {
  margin-top: 20px;
}
</style>

